<template>
  <div class="card_saContainer">
    <span class="card_saStr1">{{ props.title }}</span>
    <span class="card_saStr2">{{ props.str }}</span>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";

// const msg = i18nt.value.constantsOne.SuperM;

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.SuperM.testcardTitle,
  },
  str: {
    type: String,
    required: false,
    default: i18nt.value.constantsOne.SuperM.testStr,
  },
});
</script>

<style scoped lang="scss">
.card_saContainer {
  @include relative_hw(107px, 355px);
  flex-direction: column;
  justify-content: center;

  .card_saStr1,
  .card_saStr2 {
    margin-left: 27px;
  }

  .card_saStr1 {
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 24px;
    color: #035db9;
    @include text_limit(1, 286px);
  }
  .card_saStr2 {
    margin-top: 7px;
    font-family: "Songti SC", "Songti SC";
    font-size: 18px;
    color: #a3a3a3;
    text-align: left;
  }
}
</style>
